@use 'sass:math';
@use '../../styles/variables';
@use '../../styles/colors';

$form-input-border-width: variables.$default-border;
$form-input-border-radius: variables.$default-border-radius;
$form-input-padding: (0.75 * variables.$default-gap - variables.$default-border);
$form-input-small-padding: (0.25 * variables.$default-gap - math.div(variables.$default-border, 2)) (0.75 * variables.$default-gap - variables.$default-border);
$form-input-color: colors.$color-text-dark;
$form-input-placeholder-color: colors.$color-text-light;
$form-input-background-color: colors.$bg-color-white;
$form-input-border-color: colors.$bg-color-grey;
$form-input-focus-border-color: colors.$color-text-dark;
$form-input-hover-border-color: colors.$color-text-light;
$form-input-disabled-background-color: colors.$bg-color-grey;
$form-input-disabled-color: colors.$color-text-light;
$form-input-error-color: colors.$color-red;
$form-input-error-border-color: colors.$color-red;
$form-input-font-family: variables.$font-family;
$form-input-font-size: 0.875rem;
$form-input-font-weight: 500;
$form-input-line-height: 1.25rem;
$form-input-disabled-opacity: variables.$disabled-opacity;

@mixin form__input-box {
	& {
		flex: 1 1 auto;

		padding: $form-input-padding;

		transition:
		border-color variables.$default-time-animation,
		color variables.$default-time-animation,
		background-color variables.$default-time-animation,
		trasform variables.$default-time-animation;

		color: $form-input-color;
		border: $form-input-border-width solid $form-input-border-color;
		border-radius: $form-input-border-radius;
		outline: none;
		background-color: $form-input-background-color;

		font-family: $form-input-font-family;
		font-size: $form-input-font-size;
		font-weight: $form-input-font-weight;
		line-height: $form-input-line-height;
	}

	&:focus {
		border-color: $form-input-focus-border-color;
	}

	&:hover {
		border-color: $form-input-hover-border-color;
	}

	&--small {
		padding: $form-input-small-padding;
	}

	&--disabled {
		cursor: not-allowed;

		opacity: $form-input-disabled-opacity;
		color: $form-input-disabled-color;
		border-color: $form-input-border-color;
		background-color: $form-input-disabled-background-color;
	}

	&--error,
	&--error:focus,
	&--error:hover {
		color: $form-input-error-color;
		border-color: $form-input-error-border-color;
	}
}
